<!-- fileName: NewMusic -->
<template>
  <div>
    <entry-title>最新音乐</entry-title>
    <div>
      <!-- Cell -->
      <div
        style="display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr)); ">
        <div v-for="cell in newMusicList">
          <div class="cell-row hoverRow">
            <div class="cell-col-0" style="margin: auto 0">
              <el-avatar :src="cell.picUrl + '?param=50y50'" class="avatar" shape="square"></el-avatar>
              <div style="position: absolute;
                          top: 50%; left: 50%;
                          transform: translate(-50%, -50%);
                          border-radius: 50px;
                          width: 30px;
                          height: 30px;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          background: rgba(255, 255, 255, .6);">
                <img :src="redPlayIcon" style="margin-left: 5px; width: 15px; height: 15px;"/>
              </div>
            </div>
            <div class="cell-col-1">
              <!-- 歌名, 强制一行 -->
              <div class="songName">{{ cell.name }}</div>
              <!-- 歌曲详情 -->
              <div>
                <!-- 歌曲详情Items -->
                <div class="artists">
                  {{ cell.song.artists.map(artist => artist.name).join('-') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { discoverApi } from '@/api/discover'
  import redPlayIcon from '@/assets/img/discover/playIconRed.png'
  import playIconRed from '@/assets/img/discover/playIconRed.png'
  import img from '@/assets/img/discover/xy.jpg'

  export default {
    data() {
      return {
        redPlayIcon,
        img,
        playIconRed,
        newMusicList: []
      }
    },
    created() {
      this.getNewMusic()
    },
    mounted() {
    },
    methods: {
      getNewMusic() {
        discoverApi().getNewMusic({
          limit: 12
        }).then(res => {
          this.newMusicList = res.result
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .cell-row {
    display: flex;
  }

  .cell-col-0 {
    position: relative;
  }

  .cell-col-1 {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
  }

  .cell-col-1 .songName {
    white-space: nowrap;
    font-size: 15px;
    color: rgba(0, 0, 0, .7);
  }

  .cell-col-1 .artists {
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @font-face {
    font-family: 'english-font';
    src: url("../../../assets/font/i_'mnotlazy.ttf");
  }

  .avatar {
    height: 100%;
    width: 100%;
  }

  .hoverRow {
    height: 48px;
    margin-top: 10px;
    border-radius: 5px;
    margin-right: 10px;
  }

  .hoverRow:hover {
    background-color: rgba(41, 42, 43, .1);
  }

  .playIconBg {
    background-color: rgba(255, 255, 255, .8);
    width: 25px;
    height: 25px;
    top: 10px;
    left: 13px;
    position: absolute;
    z-index: 5;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .5);
  }
</style>
